<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复杂表单元素</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        form{
            width: 300px;
            padding: 50px 20px;
            border: 1px solid red;
        }
        fieldset{
            padding: 20px;
        }
    </style>
</head>
<body>
    <form action="https://www.baidu.com/" target="_blank" method="post">
        <!-- fieldset 表单元素分组 -->
        <fieldset>
            <!-- legend 分组标题 -->
            <legend>基础信息</legend>
            姓名：<input type="text"><br>
            年龄：<input type="number" name="" id=""><br>
            <!-- radio 单选框 -->
            <!-- label 扩大选项按钮选择范围 在label里的内容被点击时会关联到他绑定的选项按钮 -->
            性别: 
                <label for="man">男</label> <input type="radio" name="sex" id="man"> 
                <label for="woman">女</label> <input type="radio" name="sex" id="woman">
                <label for="privacy">保密</label> <input type="radio" name="sex" id="privacy"><br>
            出生日期：<input type="date" name="" id="">
        </fieldset>
        <fieldset>
            <legend>扩展信息</legend>
            个性签名：<textarea name="" id="" cols="30" rows="3"></textarea><br>
            <!-- checkbbox 复选框 一组的name值必须相同 -->
            兴趣爱好：
            <label for="唱歌">唱歌</label> <input type="checkbox" name="like" value="唱歌" id="唱歌">
            <label for="跳舞">跳舞</label> <input type="checkbox" name="like" value="唱歌" id="跳舞">
            <label for="打篮球">打篮球</label> <input type="checkbox" name="like" value="唱歌" id="打篮球">
            <label for="rap">rap</label> <input type="checkbox" name="like" value="唱歌" id="rap"><br>
            喜欢的食物：
            <!-- select 划分一个下拉式选项区域 -->
            <select name="" id="">
                <!-- 分组标题 label 标题名称 -->
                <optgroup label="炒菜">
                    <!-- option 添加分组项 -->
                    <option value="">凉拌肉</option>
                    <option value="">粉蒸肉</option>
                    <option value="">回锅肉</option>
                </optgroup>
                <optgroup label="菜系">
                    <!-- option 添加分组项 -->
                    <option value="">火锅</option>
                    <option value="">干锅</option>
                    <option value="">西餐</option>
                </optgroup>

            </select>
        </fieldset>
    </form>
</body>
</html>